<!--
 * @Descripttion: 班组人员列表
 * @LastEditors: xzh
 * @LastEditTime: 2023-08-25 11:18:45
-->
<template>
  <DileLayer
    v-model="teamPeopleParam.visible"
    :layerWidth="600"
    :layerHeight="400"
    :footerVisible="false"
    :title="teamPeopleParam.teamInfo?.name"
  >
    <div class="team-popleList">
      <DileTable ref="dileTableRef">
        <template #preColumn>
          <vxe-column
            :title="$t('page.organizeManageArr.departmentArr.department')"
          >
            <template #default="{ row }">
              <span>{{ row.extJson?.departmentName }}</span>
            </template>
          </vxe-column>
          <vxe-column
            field="name"
            :title="`${$t('page.systemManageArr.teamArr.prople')}(${
              propsParam.tableData?.length
            })`"
          />
          <vxe-column :title="$t('page.organizeManageArr.postmentArr.post')">
            <template #default="{ row }">
              <span>{{ row.extJson?.jobPostName }}</span>
            </template>
          </vxe-column>
        </template>
      </DileTable>
    </div>
  </DileLayer>
</template>

<script setup lang="ts">
import { object_Inf } from "@/utils/typings/index.type";
import { ref, reactive, provide, nextTick, toRefs } from "vue";
import { useI18n } from "vue-i18n";
import DileLayer from "@/components/dile-layer/index.vue";
import DileTable from "@/components/dile-table/index.vue";
import { propsParam_Inf } from "@/components/dile-table/index.type";
import Dile_APi from "@/api";
/**
 * @Author: xzh
 * @Descripttion:i18n实例
 * @Param:
 */
let { t } = useI18n();

/**
 * @Author: xzh
 * @Descripttion: 班组人员列表参数
 * @Param:
 */
let teamPeopleParam = reactive<object_Inf>({
  visible: false,
  teamInfo: {}, //班组信息
});

/**
 * @Author: xzh
 * @Descripttion: 初始化
 * @Param:
 */
let init = (teamInfo: object_Inf) => {
  Object.assign(teamPeopleParam, {
    visible: true,
    teamInfo,
  });
  //加载班组人员信息
  !!teamInfo.members && initTeamMembers();
};
/**
 * @Author: xzh
 * @Descripttion:加载班组人员信息
 * @Param:
 */
let initTeamMembers = async () => {
  let { loading } = toRefs(propsParam),
    { members, manager } = teamPeopleParam.teamInfo;
  try {
    loading.value = true;

    let tableData = (await Dile_APi.getUserInfoByIds(members?.split(","))).map(
      (row: object_Inf) => {
        return {
          ...row,
          name: `${row.name}${
            row.id == manager
              ? `(${t("page.systemManageArr.teamArr.manager")})`
              : ""
          }`,
        };
      }
    );

    Object.assign(propsParam, {
      tableData,
    });
  } finally {
    loading.value = false;
  }
};

/**
 * @Author: xzh
 * @Descripttion: 表格参数
 * @Param:
 */
let propsParam = reactive<propsParam_Inf>({
  loading: false,
  tableData: [],
});
provide("propsParam", propsParam);

/**
 * @Author: xzh
 * @Descripttion: 暴露方法
 * @Param:
 */
defineExpose({
  init,
});
</script>
<style lang="scss" scoped>
.team-popleList {
  height: 100%;
  padding: 1rem;
}
</style>
